import React from 'react'
import "../../scss/jjt/Myhomes.scss"
import { Toast,NavBar  } from 'react-vant';
// import { SettingO,Ellipsis    } from '@react-vant/icons';
import { useNavigate } from 'react-router-dom';
import { Typography } from 'react-vant';
import IconFont from "../publics/JjtIcon";
import { Badge } from 'react-vant';
import { useState } from 'react';
import { useEffect } from 'react';
import axios from 'axios';
//我的房源
export default function Myhomesment() {
    let navigate = useNavigate();
    let data = ["全部","未出租","已出租","已下架"]
    let [btnindex,setbtnindex] = React.useState(0)
    let [homedata,sethomedata] = useState([])
    let uid = localStorage.getItem("_id")
    let gethomedata = async()=>{
        let res = await axios.get("http://localhost:3000/jjt/getHome",{params:{uid,btnindex}})
        console.log(res.data)
        sethomedata(res.data)
    }
    //下架
    let delhouse = async(item)=>{
        item.house_status = 2
        await axios.post("http://localhost:3000/jjt/edithouse",item)
        gethomedata()
    }
    let change = (index)=>{
        setbtnindex(index)
    }
    let surechu= async(item)=>{
        console.log(item)
        item.house_status = 1
        await axios.post("http://localhost:3000/jjt/edithouse",item)
        gethomedata()
    }
    let twochu= async(item)=>{
        item.house_status = 0
        await axios.post("http://localhost:3000/jjt/edithouse",item)
        gethomedata()
    }
    useEffect(()=>{
        gethomedata()
    },[btnindex])
    const Child = () => (
        <div style={{ width: 80, height: 40,lineHeight:"40px",  borderRadius: 5 ,marginTop:"10px",position:"absolute", top:"-25px",right:"1px"}} >预约看房</div>
      );
  return (
    <div className='myhomesment'>
        <div className='myhomesmenttop'>
        <NavBar
            title="我的房源"
            
            // leftText="返回"
            rightText={
                <Badge   offset={[5, 0]} content={2} style={{marginTop:"-6px"}}>
                    <Child />
                </Badge>}
            onClickLeft={() => {navigate("/myapp")}}
            onClickRight={() => navigate("/appointmentrecord4")}
            />
        </div>
        <div className='myhomesmentmiddle'>
            {
                data.map((item,index)=>(
                    <button key={index} onClick={()=>{change(index)}}>
                        <span   style={btnindex===index?{borderBottom:"3px solid orange",color:"#000000",fontWeight:"bold"}:{}}>{item}</span>
                    </button>
                ))
            }
        </div>
        <div>
        {
            homedata.map(item=>(
                <div className='myhomesmentbottom' key={item._id}>
                    <div className='myhomesmentbottomitem1'>
                        <div className='myhomesmentbottomitem1left'>
                            <span>1天前更新房源信息</span>
                        </div>
                        <div className='myhomesmentbottomitem1right'>
                            <span>{data[item.house_status+1]}</span>
                        </div>
                    </div>
                    <div className='myhomesmentbottomitem2'>
                        <div className='myhomesmentbottomcon1'>
                            <img src={require("../../staticfile/userimg.jpg")} alt="" />
                        </div>
                        <div className='myhomesmentbottomcon2'>
                            <div className='myhomesmentbottomcon2p1'>
                                <Typography.Text ellipsis className='myhomesmentbottomcon2p1con'>{item.classfy} | {item.city}，{item.describe}</Typography.Text>
                            </div>
                            <p className='myhomesmentbottomcon2p2'>
                                <Typography.Text ellipsis>{item.house_type.split("/")[0]} · {item.plot} · {item.name}</Typography.Text>
                            </p>
                            <p className='myhomesmentbottomcon2p3'>
                                <span>{item.price}元/月</span>
                            </p>
                        </div>
                    </div>
                    <div className='myhomesmentbottomitem3'>
                        <button onClick={()=>delhouse(item)} className={item.house_status?"disnone":""} >立即下架</button>
                        
                        {
                            item.house_status===1 ?<button onClick={()=>{twochu(item)}}>再次出租</button>
                            :item.house_status!==2 && <button onClick={()=>{surechu(item)}}>确认已出租</button>
                        }
                        {
                            item.house_status===2 &&  <button onClick={()=>{twochu(item)}} >再次出租</button>
                        }
                       
                    </div>
                </div>
            ))
        }
        </div>
       
        
    </div>
  )
}
